<template>
    <div>
        <!-- 首页 -->
        <div id="header" style="width: 100%;height: 60px;background-color: black;color:white;">
          <button id="but1" @click="showLowDate">正在热映</button>
          <button id="but1" @click="showHighDate">即将上映</button>
          <button id="but1">经典影片</button>
        </div>
        <div style="height: 60px">
          <span id="kinds">类型：</span>
          <input type="button" value="全部" style="width:40px;border: 0;border-radius:11px;background-color: red;" @click="showAllFilms">
          <span v-for="(t,index) in tableData" :key="index">
            <button id="but2" :value="t.pname" @click="findFilmByTypef(t.pid)">{{t.pname}}</button>
          </span>
        </div>
    </div>
    <div style="height: 1500px"  >
      <div id="filmimg" v-for="(film,index) in filmInfo" :key="index" :value="film.fid" @mouseenter="onMouseOver(film.fid,$event)" @mouseleave="onMouseOut(film.fid,$event)">
        <div class="image" @click="linkOneCinema(film.fid)"> 
          <img :src="`/img/${film.imgno}.jpg`">
        </div>
        <div id="filmName">{{film.fname}}</div>
        <div class="content" v-show="seen" >
          <div v-for="(one,index) in oneFilm" :key="index">
            <div class="title">{{one.fname}}</div>
            <div class="sub-title">类型：{{one.typef1.pname}}/&nbsp;{{one.typef2.pname}}/&nbsp;{{one.typef3.pname}}</div>
            <div class="tre-title">上映日期：{{one.date}}</div>
          </div>
        </div>
        
      </div>
      
    </div>
    <!-- <div id="clear" style="height: 1000px"></div> -->
    
</template>
<script>
    import axios from 'axios'
    import { mapState } from 'vuex';
    export default {
      name: 'shouye',
      data(){
        return{
          seen: false,
          tableData:[],
          filmInfo:[],
          oneFilm:[],
        }
    
      },
      watch:{
        fName(){
          // alert(this.fName);
          this.filmMohu();
        }
      },
      computed:{
        ...mapState(["fName"]),
        // fName: function(){
        //   return store.state.fName
        // }
      },
      components: {
      },
      methods:{
        getOneFilm(fid){
          console.log(fid);
          // var fid = sessionStorage.getItem("fid");
          axios.get("http://localhost:8080/oneFilm/"+fid)
          .then((resp)=>{
            console.log(resp.data);
            this.oneFilm = resp.data;
          })
        },
        onMouseOver(fid,event){
          this.fid = fid;
          // console.log(fid);
          this.getOneFilm(fid);
          // this.seen=true
          $(event.target).find(".content").css("display","block")
        },
        onMouseOut(fid,event){
          this.getOneFilm(fid);
          // this.seen=false
           $(event.target).find(".content").css("display","none")
        },
        linkOneCinema(fid){
          // this.$route.push("/yanchu");
          // this.$router.push({ path: '/yanchu', query: { fid: fid }})
          this.$store.commit('filmId',fid);
          this.$store.commit('sendCid',"");
          this.$router.push('/yanchu');
        },
        findFilmByTypef(pid){
          console.log(pid);
          axios.get("http://localhost:8080/filmByTypef/"+pid)
          .then((resp)=>{
            console.log(resp.data);
            this.filmInfo = resp.data;
          })
        },
        showAllFilms(){
          axios.get("http://localhost:8080/allFilms").then((resp)=>{
          this.filmInfo = resp.data;
          console.log(this.filmInfo);
        })
        },
        showHighDate(){
          axios.get("http://localhost:8080/filmByhighDate").then((resp)=>{
            console.log(resp.data);
            this.filmInfo = resp.data;
          })
        },
        showLowDate(){
          axios.get("http://localhost:8080/filmBylowDate").then((resp)=>{
            console.log(resp.data);
            this.filmInfo = resp.data;
          })
        },
        filmMohu(){
          // console.log(this.$route.query.sendName);
          // axios.get(`"http://localhost:8080/filmByMohuName/"`+this.$route.query.sendName).then((resp) => {
          //   console.log(resp.data);
          //   this.filmInfo = resp.data;
          // })

          console.log(this.$store.state.fName);
          axios.get("http://localhost:8080/filmByMohuName/"+this.$store.state.fName).then((resp) => {
            console.log(resp.data);
            this.filmInfo = resp.data;
          })

        },
        ifSelect(){
          //  var fName =this.$route.query.sendName;
            if(!this.$store.state.fName ==""){
              this.filmMohu();      
          }else{
            this.showAllFilms();  
            // console.log("1111111");
          }
        },
       
      },
       created() {
        axios.get("http://localhost:8080/allTypef").then((resp) => {
          this.tableData = resp.data;
          console.log(this.tableData);
        });
        this.ifSelect();
        
        
        
    }
    }
    </script>
<style scoped>
  #header {
   text-align: center;
   
  }
  #but1{
    height: 60px;
    color: white;
    background-color: black;
    /* position: relative;
    top: 2px; */
  }
  #kinds{
    color: darkgrey;
  }
  #but2{
    border: 0px;
    background-color: white;
    margin: 6px;
  }
  #filmimg{
    height: 270px;
   float: left;
   margin-bottom: 10px;
   margin-top: 15px;
   margin-left: 25px;
   margin-right: 40px;
  }
  /* #clear{
    clear:both;
  } */
  #filmName{
    white-space: inherit;
    width: 150px;
    height: 20px;
    color: red;
    overflow: hidden;
    text-align: center;
    position: relative;
    top: 20px;
  }
  #filmName:hover{
    overflow: visible;
  }
  #filmimg .image{
    height: 200px;
    width: 150px;
    overflow: hidden;
  }
  .image img{
    height: 100%;
    width: 100%;
   
  }
  #filmimg:hover .image img{
    
    transform: scale(1.1);
  }
  #filmimg .content{
    position: relative;
    top: -90px;
    bottom: 0px;
    background: rgba(211, 221, 235, 0.98);
    width: 150px;
    height: 70px;
    text-align: center;    
  }
  .content .title{
    font-size: 10px;
    font-weight: 300;
    color: rgb(214, 193, 118);
    text-align: left;
  }
  .content .sub-title{
    font-size: 9px;
    font-weight: 200;
    color: rgb(214, 193, 118);
    text-align: left;
  }
  .content .tre-title{
    font-size: 8px;
    font-weight: 200;
    color: rgb(214, 193, 118);
    text-align: left;
  }
</style>
